<!DOCTYPE html>
<html>
	<head>
		<title>列表</title>

		<link rel="stylesheet" href="/static/cstore/bootstrap/css/bootstrap.min.css" />
	    <link rel="stylesheet" type="text/css" href="/static/cstore/css/dataTables.bootstrap.css">
		<!--<link rel="stylesheet" href="/static/cstore/css/select2.css" />-->
 		<link rel="stylesheet" href="/static/cstore/css/matrix-style.css" />

		<script type="text/javascript" language="javascript" src="/static/cstore/datatable/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" language="javascript" src="/static/cstore/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="/static/cstore/js/dataTables.bootstrap.js"></script>
	
		<script type="text/javascript">
	
		var oTable;
		$(document).ready(function() {
		       oTable = initTable();
		    });
		    function initTable() {
		         var actionUrl='../resource/list';
		         var table = $('#example').dataTable({
		            "bFilter": false, 
		            "bAutoWidth": false,  
		            "sPaginationType" : 'full_numbers',
		            "bPaginate": true, //翻页功能
		            "bDestroy" : true,
		            "bProcessing" : true,
		            "sAjaxSource" : actionUrl,
		            "iDisplayLength":5,
		            "aLengthMenu": [[5,10, 15,20, 50, -1], [5,10, 15, 20,50, "All"]],
		            "bServerSide" : true,
		            "bSort":true,
		            "aoColumns" : [ 
		            	 {
			                "mDataProp": "Id",
			                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
			                    $(nTd).html("<input type='checkbox' align='center' name='checkList' value='" + sData + "'>"); }
					      },
		            	 {"mDataProp" : "Name",},
		                 {"mDataProp" : "Url",},
		                 {"mDataProp" : "Typename",}, 
		                 {"mDataProp" : "Level",},
		                 {"mDataProp" : "Pname",},
		                 {"mDataProp" : "Key",},
		                 {"mDataProp" : "Description",},
		                 {
			                "mDataProp": "Id",
			                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
			                    $(nTd).html("<a href='http://{{.ActionUrl}}/cstore/resource/edit?Id="+ oData.Id + "&Name= "+ oData.Name + "&Url=" + oData.Url + " &Type=" + oData.Typename + "&Level=" + oData.Level + "&Pid=" + oData.Pname + "&Key=" + oData.Key + "&Description=" + oData.Description+"'>编辑</a>&nbsp;&nbsp;")
			                        .append("<a href='javascript:void(0);' onclick='_deleteFun(" + sData + ")'>删除</a>");
			                }
            			}],
		            "oLanguage" : {
		                "sProcessing" : "正在加载中......",
		                "sLengthMenu" : "每页显示 _MENU_ 条记录",
		                "sZeroRecords" : "没有数据！",
		                "sEmptyTable" : "表中无数据存在！",
		                "sInfo" : " _START_ - _END_ 条，共 _TOTAL_ 条",
		                "sInfoEmpty" : "显示0到0条记录",
		                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
		                "oPaginate" : {
		                    "sFirst" : "首页",
		                    "sPrevious" : "上一页",
		                    "sNext" : "下一页",
		                    "sLast" : "末页"
		                }
		            }
		        });
				return table;
		    }
		 
		 function _editFun(Id, Name, Url, Type, Level, Pid, Key, Description) {
		 	  $.ajax({
		        url: "/cstore/resource/edit",
		        data: {"isAction":1,"Id": Id,"Name":Name,"Url":Url,"Type":Type,"Level":Level,"Pid":Pid,"Key":Key,"Description":Description},
		        type: "post",
		        success: function (r) {
		            if (r.status) {
		                oTable.fnReloadAjax(oTable.fnSettings());
		            } else {
		                alert(r.info);
		            }
		        }, error: function (error) {
		            console.log(error);
		        }
		    });
		 }
		    /**
		 * 删除
		 * @param id
		 * @private
		 */
		function _deleteFun(id) {
		    $.ajax({
		        url: "/cstore/resource/delete",
		        data: {"Id": id},
		        type: "post",
		        success: function (r) {
		            if (r.status) {
		                oTable.fnReloadAjax(oTable.fnSettings());
		            } else {
		                alert(r.info);
		            }
		        }, error: function (error) {
		            console.log(error);
		        }
		    });
		}
	/**
	table刷新表格
	*/ 
 	$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings) {
    this.fnClearTable(this);
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
 
    $.getJSON(oSettings.sAjaxSource, null, function (json) {
        /* Got the data - add it to the table */
        for (var i = 0; i < json.aaData.length; i++) {
            that.oApi._fnAddData(oSettings, json.aaData[i]);
        }
        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw(that);
        that.oApi._fnProcessingDisplay(oSettings, false);
    });
}

	
		</script>
	</head>

	<body> 
		<div  >
 			 <h3>资源管理 <img src="/static/img/right.png"><small>资源列表</small></h3>
	 			 <div class="cen_left_line">
	 			 <hr width=100% size=1 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=3)">
				</div>
		</div>	
			
		<div  >
			<table class="table table-bordered data-table" cellpadding="0" cellspacing="0" border="1" class="display"
				id="example">
				<thead>
					<tr>	
						<th style="width:1%" align="left"><input type="checkbox" style="left: auto; " id='checkAll' style=""></th>
						<th style="width:5%">名称</th>
						<th style="width:15%">Url</th>
						<th style="width:5%">类型</th>
						<th style="width:5%">优先级</th>
						<th style="width:5%">上级资源</th>
						<th style="width:5%">Key</th>
						<th style="width:10%">描述</th>
						<th style="width:10%">操作</th>
					</tr>
				</thead>
				<tbody id="data_body">
				</tbody>
				
			</table>
		</div>

		   
	</body>
</html>
